<template>
	<div class="flex flex-justify-end">
		<el-button icon="el-icon-minus" circle :disabled="isMin" v-repeat-click="decrease" />
		<span class="plr-1">{{ num }}</span>
		<el-button icon="el-icon-plus" circle :disabled="isMax" v-repeat-click="increase" />
	</div>
</template>
<script>
export default {
	name: "BedNum",
	props: {
		value: {
			type: Number,
			default: 0
		},
		min: {
			type: Number,
			default: 1
		},
		max: {
			type: Number
		}
	},
	data() {
		return {
			num: this.value
		};
	},
	computed: {
		isMin() {
			return this.min !== undefined && this.num <= this.min;
		},
		isMax() {
			return this.max !== undefined && this.num >= this.max;
		}
	},
	watch: {
		value(v) {
			this.num = v;
		},
		num(v) {
			this.$emit("input", v);
		}
	},
	methods: {
		decrease() {
			if (this.isMin) return;
			this.num--;
		},
		increase() {
			if (this.isMax) return;
			this.num++;
		}
	}
};
</script>
